<template>
  <view class="four">
    <view class="left">
      <view class="top">我的近期预订</view>
      <view class="bottom" v-show="showOrderText">暂无酒店预订</view>
    </view>
    <view class="right" @click="goToHouseList">立即预订</view>
  </view>
</template>
<script>
	export default {
    props: {
      showOrderText: {
        type: Boolean,
        default: true
      }
    },
		methods: {
			goToHouseList() {
				uni.navigateTo({
					url: "/pages/HotelRoomListPage/HotelRoomListPage"
				})
			},
		},
	}
</script>
<style lang="less" scoped>
.four {
  margin: 20rpx 30rpx;
  border-radius: 16rpx;
  background: #FFFFFF;
  display: flex;
  box-sizing: border-box;
  padding: 30rpx;
  justify-content: space-between;
  align-items: center;

  .left {
    display: flex;
    flex-direction: column;

    .top {
      width: 156rpx;
      height: 36rpx;
      font-family: 'PingFang SC';
      font-weight: 400;
      font-size: 26rpx;
      line-height: 36rpx;
      letter-spacing: 0px;
      color: #979797;
    }

    .bottom {
      width: 168rpx;
      height: 40rpx;
      font-family: 'PingFang SC';
      font-weight: 600;
      font-size: 28rpx;
      line-height: 40rpx;
      letter-spacing: 0px;
      color: var(--Color-2, #222222);
      margin-top: 10rpx;
    }

  }

  .right {
    width: 160rpx;
    height: 56rpx;
    border-radius: 8rpx;
    background: #0F4C97;
    font-family: 'PingFang SC';
    font-weight: 400;
    font-size: 26rpx;
    line-height: 56rpx;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-align: center;
  }

}
</style>